<template>
	<div class="submitChaindetails">
		<div class="submitChaindetails-header">新建北卡龙汽车膜电子质保</div>
		<div class="shop-bodys">
			<div class="shop-body-flex as">
				<van-field v-model="info.serialnumber"  readonly type="textarea"    autosize label="施工中心账号" placeholder="请输入施工中心编号" />
			</div>
			<div class="shop-body-flex as">
				<van-field  v-model="info.name" readonly  autosize type="textarea"  label="施工中心名称" placeholder="请输入施工中心名称" />
			</div>
			<div class="shop-body-flex as">
				<van-field  autosize  v-model="info.site" readonly label="施工中心地址" placeholder="请输入施工中心地址" />
			</div>
			
			<div class="shop-body-flex as">
				<van-field  autosize  v-model="name" label="车主姓名" placeholder="请输入车主姓名" />
			</div>
			<div class="shop-body-flex as">
				<van-field  autosize   v-model="phone" label="手机号码" placeholder="请输入手机号码" />
			</div>
			<div class="shop-body-flex as">
				<van-field
					v-model="time"
					is-link
					readonly
					name="picker"
					label="施工日期"
					placeholder="点击选择施工日期"
					@click="showPicker = true"
				/>
				<van-popup v-model:show="showPicker" position="bottom">
					<van-datetime-picker
						v-model="currentDate"
						type="date"
						title="选择年月日"
						:min-date="minDate"
						:max-date="maxDate"
						@confirm="confirmFn()" 
						@cancel="cancelFn()"
					/>
				</van-popup>
			</div>
			
			
			<div class="shop-body-flex as">
				<van-field
					v-model="start_time"
					is-link
					readonly
					name="picker"
					label="开始质保时间"
					placeholder="点击选择开始质保时间"
					@click="showPicker1 = true"
				/>
				<van-popup v-model:show="showPicker1" position="bottom">
					<van-datetime-picker
						v-model="currentDate"
						type="date"
						title="选择年月日"
						:min-date="minDate"
						:max-date="maxDate"
						@confirm="confirmFn1()" 
						@cancel="cancelFn1()"
					/>
				</van-popup>
			</div>
			
			
			<div class="shop-body-flex as">
				<van-field
					v-model="end_time"
					is-link
					readonly
					name="picker"
					label="质保截止时间"
					placeholder="点击选择质保截止时间"
					@click="showPicker2 = true"
				/>
				<van-popup v-model:show="showPicker2" position="bottom">
					<van-datetime-picker
						v-model="currentDate"
						type="date"
						title="选择年月日"
						:min-date="minDate"
						:max-date="maxDate"
						@confirm="confirmFn2()" 
						@cancel="cancelFn2()"
					/>
				</van-popup>
			</div>
			
			<div class="shop-body-flex as">
				<van-field
					v-model="type"
					is-link
					readonly
					name="picker"
					label="车辆种类"
					placeholder="点击选择车辆种类"
					@click="cartPicker = true"
				/>
				<van-popup v-model:show="cartPicker" position="bottom">
					 <van-picker
					   show-toolbar
					    :columns="cart"
					    @confirm="onConfirm"
					    @cancel="cartPicker = false"
					  />
				</van-popup>
			</div>
			
			
			<div class="shop-body-flex as" v-if="type=='其他'">
				<van-field  autosize   v-model="type_explain" label="其他请注明" placeholder="请输入其他请注明" />
			</div>
			
			<div class="shop-body-flex as">
				<van-field  autosize  v-model="version" label="品牌型号" placeholder="请输入品牌型号" />
			</div>
			
			<div class="shop-body-flex as">
				<van-field  autosize  type="textarea"  v-model="licence_plate" label="车牌号/发动机编号/车架号" placeholder="如:沪A00000" />
			</div>
			
			
			<div class="shop-body-flex as ass">
				<div class="shegongtitle">施工图片</div>
				<van-uploader
				 v-model="imglist"
				  max-count="1"
				  :after-read="afterRead"
				/>
			</div>
			
			
			
			
			<div class="shop-body-jian">
				请在以下菜单选择施工部位后，若选不到给您贴装的产品，说明该产品的质保配额库存不足。<br>
				实体店用户，请直接联系该施工中心管理员。<br>
				网络派单用户，请联系网店平台管理员。<br> 
			</div>
			
			<div class="shop-body-flex as" v-for="(item,index) in list">
				<van-checkbox  v-model="item.type" @change="checkboxChage($event,index)"    icon-size="24px">{{item.text}}</van-checkbox>
				<div style="height: 10px;"></div>
				<van-field
					is-link
					readonly
					type="textarea" 
					v-model="item.value"
					name="picker"
					label="施工项目及产品名称"
					placeholder="点击选择"
					v-if="item.type==true"
					@click="item.types = true"
				/>
				<van-popup v-model:show="item.types" position="bottom">
					<van-picker
						show-toolbar
						:columns="item.children"
						@confirm="oncheckboxConfirm($event,index)"
						@cancel="item.types = false"						
					/>

					
				</van-popup>
				
			</div>
			
			
			
			<van-cell-group inset>
			  <van-field
			   v-model="remark1"
			    rows="4"
			    autosize
			    label="金额"
			    type="textarea"
			    maxlength="50"
			    placeholder="请输入金额"
			    show-word-limit
			  />
			</van-cell-group>
					
			
			<van-cell-group inset>
			  <van-field
				v-model="remark2"
			    rows="4"
			    autosize
			    label="施工详情"
			    type="textarea"
			    maxlength="50"
			    placeholder="请输入施工详情"
			    show-word-limit
			  />
			</van-cell-group>
			
			
			<van-cell-group inset>
			  <van-field
				v-model="remark3"
			    rows="4"
			    autosize
			    label="备注"
			    type="textarea"
			    maxlength="50"
			    placeholder="请输入备注"
			    show-word-limit
			  />
			</van-cell-group>
			
			<div class="shop-body-jian">
				该电子质保申请后将由该施工中心管理员审批成功后方可成功质保。 <br>
				按“提交”后，您的申请会提交给施工中心，待施工中心管理员审批确认后，资料会到达北卡龙公司管理员审批。<br>
				您可随时进入北卡龙车膜官方账号菜单，点击"质保申请及查询" 来查询进度。<br> 
			</div>
		</div>
		
		<div class="shop-button" @click="queClick()">提交</div>
		<div class="shop-button01" @click="quexiaoClick()">取消</div>
		<div style="height: 20px;"></div>
	</div>
</template>

<script>
	import { Toast } from 'vant';
	import axios from 'axios'
	export default {
		
		 data() { 
			return {
				serialnumber: '',  
				info       : {},
				name       : '',  //姓名
				phone      : '', //手机号码
				time       : '', //质保日期
				showPicker : false,
				showPicker1 :false,
				showPicker2 : false,
				minDate: new Date(2020, 0, 1),
				maxDate: new Date(2025, 10, 1),
				currentDate: new Date(),
				//-----------------------//
				cartPicker : false,
				start_time  :'',
				end_time  : '',
				type  : '',
				cart  : ['桥车','其他'],   //汽车种类
				type_explain :'',  
				//-----------------------//
				version : '', //汽车型号
				licence_plate : '', //汽车车牌、发动机编号、车架号
				//----------------------//
				remark1  : '',  //备注1
				remark2  : '', // 备注2
 				list  : [],
				imglist :[],
				imglists :'',
				remark3 : ''
			}
	    },
		created() {
			var  query  = this.$route.query;
			this.serialnumber     = query.serialnumber;
			this.all();
		},
		methods:{
			afterRead(event) {
			    let that = this;
				let formdata = new FormData()
				formdata.append('file', event.file);
				
				axios.post('/api/index/upload',formdata,{"Content-Type": "multipart/form-data"}).then(res=>{
					that.imglists=res.data.data;
				})
				
			},
			confirmFn(e){
				this.showPicker  = false;
				this.time = this.timeFormat(this.currentDate);
			},
			cancelFn(){
				this.showPicker  = false;
			},
			onConfirm(e){
				this.cartPicker = false;
				this.type  = e;
			},
			confirmFn1(e){
				this.showPicker1  = false;
				this.start_time = this.timeFormat(this.currentDate);
			},
			cancelFn1(){
				this.showPicker1  = false;
			},
			confirmFn2(e){
				this.showPicker2  = false;
				this.end_time = this.timeFormat(this.currentDate);
			},
			cancelFn2(){
				this.showPicker2  = false;
			},
			
			
			checkboxChage(e,index){
				this.list[index]['type']  =e;
			},
			oncheckboxConfirm(e,index){
				var  list   =  this.list;
				var  children = list[index].children;
				
				for(var i = 0 ; i < children.length;i++){
				
					if(children[i]['text']  == e[0]){
						children[i]['type']  = true;
						var  xiachildren = children[i].children;
						for(var j = 0 ; j < xiachildren.length;j++){
							if(xiachildren[j]['text']  == e[1]){
								xiachildren[j]['type']  = true;
							}else{
								xiachildren[j]['type']  = false;
							}
						}
						children[i]['children']  = xiachildren;
					}else{
						children[i]['type']  = false;
					}
				}
				list[index]['children']  = children;
				list[index]['types']     = false;
				list[index]['value']     = e[0]+'-'+e[1];
				this.list  = list;
				console.log(this.list);
				
			},
			queClick(){
				let  that  = this;
				if(!that.start_time){
					Toast.fail('开始质保时间不能为空');return;
				}
				if(!that.end_time){
					Toast.fail('质保截止时间不能为空');return;
				}
				var parmes = {
					'name' : that.name,
					'phone': that.phone,
					'time' : that.time,
					'type' : that.type,
					'type_explain' : that.type_explain,
					'version'      : that.version,
					'licence_plate': that.licence_plate,
					'remark1'      : that.remark1,
					'remark2'      : that.remark2,
					'body'         : that.list,
					'build_number' : that.info.serialnumber,
					'shop_id'      : that.info.id,
					'imglists'     : that.imglists,
					'start_time'   : that.start_time,
					'end_time'     : that.end_time,
					'remark3'      : that.remark3,
				}
				parmes   = JSON.stringify(parmes)
				that.$http('post','/api/index/setguarantee',{'data':parmes}) .then(function (res) {
					if(res.code==1){
						that.$router.push('/success');
					}else{
						Toast.fail(res.msg);return;
					}
				
				})
			
				
			},
			quexiaoClick(){
				this.$router.push('/guarantee');
			},
			all(){
				let that = this;
				that.$http('get','/api/index/serialnumber',{'serialnumber':that.serialnumber}) .then(function (res) {
					if(res.code==1){
						that.info  = res.data;
						that.$http('get','/api/index/project',{'cid':that.info['xclassify_id']}) .then(function (res) {
							that.list = res.data;
						})
					}else{
						Toast.fail(res.msg);return;
					}
				});
			},
			timeFormat(time) { // 时间格式化 2019-09-08
				let year = time.getFullYear();
				let month = time.getMonth() + 1;
				let day = time.getDate();
				return year + '年' + month + '月' + day + '日'
			}
		}
	}
</script>

<style lang="less">
	.submitChaindetails {
		.submitChaindetails-header {
			text-align: center;
			color: #808080;
			font-size: 14px;
			line-height: 40px;
			background-color: #fbf9fe;
		}
		.shop-bodys {
			width: 96%;
			margin: auto;
		}
		.as {
			padding-top: 10px;
			min-height: 50px;
			border-bottom: 1px solid #e5e5e5;
		}
		.shop-body-jian {
			width: 96%;
			margin: auto;
			color: #333;
			text-align: justify;
			margin-top: 20px;
			font-size: 15px;
			margin-bottom: 20px;
		}
		.shop-button01 {
			width: 90%;
			margin: auto;
			margin-top: 20px;
			text-align: center;
			line-height: 42px;
			color: #fff;
			border-radius: 10px;
			background-color: #F8F8F8;
			margin-bottom: 20px;
			color: #000000;
			font-size: 15px;
		}
		.van-checkbox {
			margin-left: 18px;
		}
		.van-ellipsis {
			white-space: inherit;
			text-overflow: initial;
		}
	}
	.ass {
		padding-left: 17px;
	}
	.shegongtitle {
		color: #646566;
		line-height: 41px;
	}
</style>